<template>
  <div class="wrap">
    <div class="form-box">
      <div class="title">密码修改</div>
      <div class="label">
        <el-input placeholder="请输入当前密码" v-model="currentForm.password" show-password @keyup.enter.native="next"></el-input>
      </div>
      <div class="tips">
        <el-link :underline="false" @click="jumpForgetPassword">忘记密码？</el-link>
      </div>
      <div class="footer">
        <el-button style="width: 100%;" type="primary" @click="next">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {checkPassword} from "@/api/business";

export default {
  name: "resetPassword",
  data(){
    return {
      currentForm:{
        password: '',
      }
    }
  },
  methods:{
    // 忘记密码 跳转到忘记密码页面
    jumpForgetPassword(){
      this.$router.push({
        name : 'forgetPassword'
      })
    },
    // 下一步
    next(){
      if(!this.currentForm.password){
        this.$errorMessage('请填写密码');
        return;
      }
      checkPassword(this.currentForm.password)
        .then(res=>{
          if(res.error != 0){
            this.$errorMessage(res.message)
            return;
          }
          this.$router.push({
            name : 'resetPassword2',
            query: {
              type: 1,
            },
          })
        })
    },
  }
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 30px 30px;
  .form-box{
    width: 420px;
    max-width: 100%;
    min-height: 250px;
    background-color: #ffffff;
    padding: 50px 30px 30px 30px;
    //padding: 160px 35px 0;
    margin: 50px auto;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    .title{
      text-align: center;
      font-weight: 700;
      margin-bottom: 30px;
    }
    .tips{
      display: flex;
      flex-direction: row-reverse;
    }
    .footer{
      margin-top: 20px;
    }
    //box-shadow:darkgrey 10px 10px 30px 5px;
  }
}
</style>
